﻿@{
    DLULearningNetworkModel.Account accountOwner = ViewBag.AccountOwner as DLULearningNetworkModel.Account;
    DLULearningNetworkModel.Account curUser = ViewBag.CurUser as DLULearningNetworkModel.Account;
    ViewBag.Title = accountOwner.Nickname_s;
    Layout = "~/Views/Shared/UserPageLayout.cshtml";
    
}
@if (false)
{ 
    <script type="text/javascript" src="../../Scripts/jquery-1.5.1-vsdoc.js"></script>
}
@section cssjs{
    <script type="text/javascript" src="../../Scripts/Custom/jquery.autogrow.js"></script>
    <script type="text/javascript">
        //ready
        $(function () {
            $("div[id^=buser]").click(function () {
                idRecord = $(this).attr("id").substring(6);
                $(this).hide(); idOfCmtbox = "cmtbox_" + idRecord;
                $("div[id =" + idOfCmtbox + "]").show().focus();
            });
            $("#txtMainStatus").autogrow().addClass("autogrow");
            $("#btnSubmitMainStatus").click(function (event) {
                SubmitMainStatus();
                event.stopPropagation();
                return false;
            });
            GetWallDetail(true);
            HoverWallDetailDisplayDeleteButton();
            GiveClickEventForDeleteButton()
            //Gan status moi nhat

            $("#moreWallDetail").click(function () {
                GetWallDetail(false);
            })
        });

        function MakeColumnEqual() {
            maxHeight = parseInt($("#main-content").css("height")) > 600 ? parseInt($("#main-content").css("height")) + 100 : 600;
            $("#main").css("height", maxHeight);
        }

        function MakeTextareaAutoGrow() {
            $('textarea').not('.autogrow').autogrow().addClass("autogrow");
        }

        function GiveClickEventForTempTextbox() {
            $('div [id^=virtualbox_]').not(".hasClickEvent").click(function () {
                $('div[id^=cmtbox_' + $(this).attr("wd") + ']').css('display', 'block').find('textarea').focus();
                $(this).parent().css('display', 'none');
                $(this).addClass("hasClickEvent");
            });
        }

        function GiveClickEventForBtnSubmitComment() {
            $('a[id^=SubmitComment_]').not('.hasClickEvent').click(function () {
                wallDetailID = $(this).attr("wd");
                SaveComment(wallDetailID);
                $(this).addClass("hasClickEvent");
                GiveClickEventForTempTextbox();
            });
        }
        function HideMoreCommentLink() {
            $('a[id^=moreCom]').each(function (index, value) {
                var wallDetailID = $(this).attr("wd");
                var loaded = parseInt($(this).attr("loaded"));
                var totalComment = parseInt($("#childComment_" + wallDetailID).attr("totalComment"));
                if (loaded >= totalComment) {
                    $(this).parent().css('display', 'none').addClass("hasClickEvent");
                }
            })
        }
        function GiveClickEventForMoreComment() {
            $('a[id^=moreCom]').not('.hasClickEvent').click(function () {
                var wallDetailID = $(this).attr("wd");
                var loaded = parseInt($(this).attr("loaded"));
                var totalComment = parseInt($("#childComment_" + wallDetailID).attr("totalComment"));
                if (loaded < totalComment) {
                    $.get("/UserPage/GetMoreComment", { 'wallDetailID': wallDetailID, 'numberOfSkip': loaded, 'numberOfTake': 10 }, function (data) {
                        var arrChildComment = $.parseJSON(data);
                        AddListChildCommentIntoDom(arrChildComment, wallDetailID);

                    });
                    $(this).addClass("hasClickEvent");
                }

            })
        }
        function HoverWallDetailDisplayDeleteButton() {
            $(".wallDetail").live({
                'mouseenter': function () {
                    $(this).find("a[id^=deleteWallDetail_]").css('display', 'block');
                },
                'mouseleave': function () {
                    $(this).find("a[id^=deleteWallDetail_]").css('display', 'none');
                }
            });
            $(".row-comment").live({
                'mouseenter': function () {
                    $(this).find("a[id^=deleteChildComment_]").parent().css('display', 'block');
                },
                'mouseleave': function () {
                    $(this).find("a[id^=deleteChildComment_]").parent().css('display', 'none');
                }
            });
        }
        //Ke ca comment hay tuong
        function GiveClickEventForDeleteButton() {
            $("a[id^=deleteWallDetail_]").live('click', function () {
                var wallDetailID = $(this).closest(".wallDetail").attr("id");
                $.get("/UserPage/DeleteWallDetail", { 'wallDetailID': wallDetailID }, function (data) {
                    if (data == "true") {
                        $("#" + wallDetailID).next().remove();
                        $("#" + wallDetailID).remove();
                        var numberOfWallDetail = parseInt($("#feedStory").attr("numberOfWallDetail"));
                        numberOfWallDetail -= 1;
                        $("#feedStory").attr("numberOfWallDetail", numberOfWallDetail);
                    }
                })
            });
            $("a[id^=deleteChildComment_]").live('click', function () {
                var childCommentID = $(this).closest(".row-comment").attr("id");
                $.get("/UserPage/DeleteChildComment", { 'childCommentID': childCommentID }, function (data) {
                    if (data == "true") {
                        var wallDetailID = $(this).parent(".childComment").attr("wd");
                        $("#" + childCommentID).remove();
                        var loaded = parseInt($('a[id=moreCom_' + wallDetailID + ']').attr("loaded"));
                        loaded -= 1;
                        $('a[id=moreCom_' + wallDetailID + ']').attr("loaded", loaded);
                    }
                });
            })
        }

        function SubmitMainStatus() {
            content = $('div[name=txtMainStatus]').html();
            content = EncodeContent(content);
            $.get("/UserPage/AddNewWallDetail", { 'accountOwnerID': $('input[name=AccountOwnerID]').val(), 'content': content }, function (data) {
                walldetail = $.parseJSON(data);
                $('#spStatus').text(DecodeContent(walldetail.Content));
                AddWallDetailIntoFeedStory(walldetail, "Head");
                $('div[name=txtMainStatus]').html(" ");
                $('#txtMainStatus').val(" ").css("height", 36);
                GiveClickEventForTempTextbox();
            });
        }

        function GetWallDetail(first) {
            if ($("#feedStory").attr("numberOfWallDetail") < 0) {
                //khong con wall detail nao nua,
                //Undone : disable button lay them.
                return;
            }
            $.get("/UserPage/GetWallDetails", { 'accountOwnerID': $('input[name=AccountOwnerID]').val(), 'numberOfSkip': $("#feedStory").attr("numberOfWallDetail"), 'numberOfTake': 10 }, function (data) {
                if (data == null)
                    return;
                arrWallDetail = $.parseJSON(data);
                if (arrWallDetail.length == 0) {
                    $("#moreWallDetail").parent().css('display', 'none');

                    return;
                }
                if (arrWallDetail.length < 10) {
                    $("#moreWallDetail").parent().css('display', 'none');
                }
                var numberOfWD = parseInt($("#feedStory").attr("numberOfWallDetail")) + arrWallDetail.length;
                $("#feedStory").attr("numberOfWallDetail", numberOfWD);
                for (var i = 0; i < arrWallDetail.length; i++) {
                    AddWallDetailIntoFeedStory(arrWallDetail[i], "Tail");
                    AddListChildCommentIntoDom(arrWallDetail[i].ArrayChildComment, arrWallDetail[i].WallDetailID);

                }
                if (first == true) {
                    if ($("#feedStory").find('.wallDetail').length != 0) {
                        $('#spStatus').html($("#feedStory").find('.wallDetail').first().html());
                    }
                    else {
                        $("<span>Chưa đăng bài</span>").appendTo($("#feedStory"));
                    }
                }
                //MakeColumnEqual();
                MakeTextareaAutoGrow();
                GiveClickEventForTempTextbox();
                GiveClickEventForBtnSubmitComment();
                GiveClickEventForMoreComment();
                HideMoreCommentLink();
            });
        }

        function AddWallDetailIntoFeedStory(wallDetail, position) {
            strWallDetailHtml = $("#wallDetailTemplate").html();
            for (prop in wallDetail) {
                str = "{" + prop + "}";
                regexp = new RegExp(str, "g");
                if (prop == "Content") {
                    wallDetail[prop] = DecodeContent(wallDetail[prop]);
                }
                strWallDetailHtml = strWallDetailHtml.replace(regexp, wallDetail[prop]);
            }
            if (position == "Tail") {
                $("#feedStory").append(strWallDetailHtml);
            }
            if (position == "Head") {
                firstWallDetail = $("#feedStory").find('.wallDetail').first();
                if (firstWallDetail.length != 0) {
                    $(strWallDetailHtml).insertBefore(firstWallDetail);
                } else {
                    $("#feedStory").html(" ");
                    $(strWallDetailHtml).appendTo($("#feedStory"));
                }
            }
        }

        function SaveComment(wallDetailID) {
            content = $('div[name=txtComment_' + wallDetailID + ']').html();
            content = EncodeContent(content);
            $.get("/UserPage/AddNewComment", { 'wallDetailID': wallDetailID, 'content': content }, function (data) {
                newchildComment = $.parseJSON(data);
                AddChildCommentIntoDom(newchildComment, wallDetailID, "bottom");
                //$('div[name=txtComment_' + wallDetailID + ']').html(" ");
                $('textarea[wd=' + wallDetailID + ']').val(" ").css("height", 37);
                var loaded = parseInt($('a[id=moreCom_' + wallDetailID + ']').attr("loaded"));
                loaded += 1;
                $('a[id=moreCom_' + wallDetailID + ']').attr("loaded", loaded);
            })
        }

        function AddListChildCommentIntoDom(arrayChildComment, wallDetailID) {
            if (arrayChildComment == null)
                return;
            for (var i = 0; i < arrayChildComment.length; i++) {
                if (arrayChildComment[i] != null) {
                    AddChildCommentIntoDom(arrayChildComment[i], wallDetailID, "top");
                }
            }
            var loaded = parseInt($('a[id=moreCom_' + wallDetailID + ']').attr("loaded"));
            loaded += arrayChildComment.length;
            var totalComment = parseInt($("#childComment_" + wallDetailID).attr("totalComment"));
            $('a[id=moreCom_' + wallDetailID + ']').attr("loaded", loaded);
            if (loaded >= totalComment) {
                $('a[id=moreCom_' + wallDetailID + ']').parent().css('display', 'none');
            }
        }
        function AddChildCommentIntoDom(newchildComment, wallDetailID, pos) {
            try {
                strChildComment = $("#commentRowTemplate").html();
                for (prop in newchildComment) {
                    regExp = new RegExp("{" + prop + "}", "g");
                    if (prop == "Content") {
                        newchildComment[prop] = DecodeContent(newchildComment[prop]);
                    }
                    strChildComment = strChildComment.replace(regExp, newchildComment[prop]);
                }
                if (pos == "top") {
                    $(strChildComment).insertAfter($('#anchor_' + wallDetailID));
                }
                else {
                    $(strChildComment).insertBefore($('#cmtbox_' + wallDetailID));
                }
            } catch (err) {
                e = err.Description;
            }
        }
        function EncodeContent(stringInput) {
            stringInput = stringInput.replace(/(<br>){2,}/g, "\n");
            stringInput = stringInput.replace(/<br>/g, "\n");
            stringInput = stringInput.replace(/(\n*(&nbsp;)*)$/g, "")
            return stringInput;
        }

        function DecodeContent(stringInput) {
            stringInput = stringInput.replace(/(&lt;)/g, '<')
                                    .replace(/(&gt;)/g, '>')
                                    .replace(/(&amp;)/g, '&')
                                    .replace(/\n/g, "<br>");
            return stringInput;
        }
    </script>
}
@section makeFriend{
    @if (ViewBag.ShowMakeFriend)
    {
        <a href="#" name='btnMakeFriend' class="dlubtn" friendID ='@accountOwner.AccountID_u'>
            Kết bạn</a>       
    }
}
@section userPageMenu{
    @Html.Partial("UserPageMenu", accountOwner)
}
@section leftContent{
    <input type="hidden" name="AccountOwnerID" value="@accountOwner.AccountID_u"/>
    <input type="hidden" name="AccountOwnerNickName" value="@accountOwner.Nickname_s"/>
    <div class="status-pf">
        <h1>
            @accountOwner.LastName_s @accountOwner.FirstName_s
        </h1>
        @*Ten nguoi duoc xem*@
        <div>
            @*Hien thi noi dung walldetail*@ <a href="#" id="delStatusId" class="close stt" title="Xóa trạng thái"
                onclick="return false;"></a>
            <img src="../../Content/Images/blank.gif" alt="" class="note-l" />
            <span id="spStatus">Đây là nội dung wall detail cuối cùng. </span>
            <img src="../../Content/Images/blank.gif" alt="" class="note-r" />
            <span class="grey" id="spStatusDate">8:34 sáng hôm qua </span>
        </div>
    </div>
    <div id="statusCenter">
        <div class="status-input" id="status_id">
            @if (ViewBag.PostWallDetail)
            {
                <textarea name="txtMainStatus" id="txtMainStatus" class="mainStatus">Bạn đang nghĩ gì?</textarea>
                <div class="clr">
                    <a id="btnSubmitMainStatus" class="dlubtn" style="margin-right: 0;">Cập nhật</a>
                </div>
                
            }
            else
            {
                <span>Bạn không được quyền đăng lên tường của @accountOwner.LastName_s @accountOwner.FirstName_s</span>
            }
        </div>
        <div class="clr" style="height: 30px;">
        </div>
        <div id="feedStory" numberofwalldetail="0">
        </div>
        <div>
            <a id="moreWallDetail" href="#" onclick="return false;">Xem thêm</a>
        </div>
    </div>
    <div id="wallDetailTemplate" style="display: none;">
        <div id="{WallDetailID}" class="wallDetail">
            <div class="wallDetail-l">
                <a class="avt" href="#">
                    <img alt="avatar" src="{AccountPostAvatar}" /></a>
            </div>
            <div class="wallDetail-r">
                <div class="message">
                    <a id="deleteWallDetail_{WallDetailID}" href="#" onclick="return false;" class="close"
                        style="display: none;"></a><a class="avt" href="/UserPage/Home/{AccountPostNickName}">
                            <strong>{AccountPostName}</strong></a>&nbsp;<span>{Content}<span>
                </div>
                <div class="actlink">
                    <span class="grey">{Time}</span> <span class="icodot"></span><span class="grey">{NumberOfComment}</span>
                    <span class="icodot"></span><span class="likelink"><a id="" isliked="1" href="#"
                        onclick="return false;">{Like}</a> </span>
                </div>
            </div>
        </div>
        <div class="childComment" id="childComment_{WallDetailID}" wd="{WallDetailID}" totalcomment="{NumberOfComment}">
            
            <div class="row-comment">
                <a href="#" id="moreCom_{WallDetailID}" wd="{WallDetailID}" loaded="0" onclick="return false;"
                    class="moreCom">Xem thêm lời bình luận</a>
            </div>
            <div class="row-comment" id="anchor_{WallDetailID}" style="display: none;">
            </div>
            <div id="cmtbox_{WallDetailID}" wd="{WallDetailID}" class="row-comment" style="display: none;">
                <div id="avt_ID" class="rowcomlt">
                    <img src="@Url.Content(curUser.Avatar_s)" />
                </div>
                <div class="wrcomtxterae">
                    <textarea id="txtComment_{WallDetailID}" wd="{WallDetailID}"></textarea>
                </div>
                <div class="ctnbtn">
                    <div class="cmttip">
                    </div>
                    <a href="#" id="SubmitComment_{WallDetailID}" wd="{WallDetailID}" onclick="return false;">
                        <em>Bình luận</em></a>
                    <div class="clr">
                    </div>
                </div>
            </div>
            <div class="row-comment" style="display: block">
                <div id="virtualbox_{WallDetailID}" wd="{WallDetailID}" class="wrtcom tmpTxt">
                    Nhập lời bình</div>
            </div>
        </div>
    </div>
    <div id="commentRowTemplate" style="display: none;">
        <div class="row-comment" id="{ChildCommentID}" style="display: block;">
            <div id="dcr_ID" style="display: none;">
                @*Disable/close comment row*@ <a id="deleteChildComment_{ChildCommentID}" href="#"
                    class="close" onclick="return false;" style="margin-right: 5px"></a>
            </div>
            <div class="rowcomlt">
                <a class="avt" href="/UserPage/Home/{AccountPostNickName}">
                    <img src="{AccountPostAvatar}"></a>
            </div>
            <div class="rowcomrt">
                <a class="avt" href="/UserPage/Home/{AccountPostNickName}"><strong>{AccountPostName}</strong></a>
                <span>{Content}</span>
                <p>
                    <span class="grey">{Time}</span>
                </p>
            </div>
        </div>
    </div>
}
@section rightBox{
    <div style="margin-bottom: 13px;">
        <div class="tab" style="margin-bottom: 5px;">
            <h3>
                Bạn của tôi</h3>
            <a href="#">Tất cả</a>
        </div>
        <div class="clr">
        </div>
        <div class="avar-42">
            <a href="#" title="rubylight89 Ruby">
                <img src="" alt="rubylight89 Ruby" title="rubylight89 Ruby">
            </a>
        </div>
        <div class="avar-42">
            <a href="#" title="Hydra Dang">
                <img src="" alt="Hydra Dang" title="Hydra Dang">
            </a>
        </div>
        <div class="avar-42" style="margin-right: 0;">
            <a href="#" title=" Nguyên">
                <img src="" alt=" Nguyên" title=" Nguyên">
            </a>
        </div>
        <div class="clr">
        </div>
    </div>
}
